<script setup name="name">
import * as echarts from 'echarts'
import { markRaw, nextTick, watchEffect } from 'vue'
const props = defineProps({
  data: {
    type: Number,
    default: 10
  },
  width: {
    type: String,
    default: '9.25rem'
  },
  height: {
    type: String,
    default: '9.25rem'
  },
  color: {
    type: String,
    default: '#f2bd42'
  },
  name: {
    type: String,
    default: '默认'
  }
})
// 线边仓实例
const lineEdgeRef = ref(null)

const myChart = ref()
const option = {
  textStyle: {
    // 图例的公用文本样式。
    fontSize: 14,
    color: '#fff'
  },
  grid: {
    left: '1%',
    right: '1%',
    bottom: '0%',
    top: '5%',
    containLabel: true
  },
  series: [
    {
      type: 'pie',
      radius: ['85%', '100%'],
      color: props.color,
      avoidLabelOverlap: false,
      hoverAnimation: false,
      labelLine: {
        normal: {
          show: false
        }
      },
      data: [
        {
          // 数据值
          value: 0,
          // 数据项名称
          name: 'props.name',
          //该数据项是否被选中
          selected: false,
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold',
              formatter: `{b}
              
{c}`
            }
          },
          // 单个扇区的标签配置
          label: {
            // 是显示标签
            show: true,
            position: 'center',
            color: '#fff'
          }
        }
      ]
    }
  ]
}
// 动态
const init = cityIndex => {
  myChart.value.dispatchAction({ type: 'downplay', seriesIndex: 0 })
  myChart.value.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: cityIndex })
  myChart.value.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: cityIndex })
}

const initData = () => {
  option.series[0].data[0].value = props.data
  option.series[0].data[0].name = props.name
  option.series[0].color = props.color

  // 初始化echart
  const chartRefWrap = unref(lineEdgeRef)
  if (chartRefWrap) {
    myChart.value = markRaw(echarts.init(chartRefWrap))

    myChart.value.setOption(option)
    window.addEventListener('resize', chartsResize)
    setTimeout(() => {
      init()
    }, 1000)
    //自动切换顺序
  }
}

const chartsResize = () => {
  myChart.value && myChart.value.resize()
}

nextTick(() => {
  initData()
})
watchEffect(() => {
  initData()
  // console.log(props.data)
})
</script>

<template>
  <div ref="lineEdgeRef" :style="{ width: props.width, height: props.height }"></div>
</template>

<style lang="scss" scoped>
.ss {
  background-color: red;
}
</style>
